<template>
	<view class="gerenziliao">
		<headertop title="个人资料" str1="oridei" :back1="back1"></headertop>
		<view class="gerenziliaoback">

		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="centerfenlei">
			<view :class="active==0?'itemfenlei cc':'itemfenlei'" @click="qiehuan(0)">
				<span>基本信息</span>
				<view class="activebox" v-if="active==0">

				</view>
			</view>
			<view :class="active==1?'itemfenlei cc':'itemfenlei'" @click="qiehuan(1)">
				<span>病程记录</span>
				<view class="activebox" v-if="active==1">

				</view>
			</view>
			<view :class="active==2?'itemfenlei cc':'itemfenlei'" @click="qiehuan(2)">
				<span>检查记录</span>
				<view class="activebox" v-if="active==2">

				</view>
			</view>
		</view>
		<view class="bottomContent">
			<jibenxinxi :userobj="userobj" v-if="active==0"></jibenxinxi>
			<bingchengjilu @scfun="initsc(1)" :list="list" v-if="active==1"></bingchengjilu>
			<checkrecord @scfun1="initsc(2)" v-if="active==2" :list1="list1"></checkrecord>
		</view>
	</view>
</template>
<script setup>
	import headertop from '@/components/header.vue'
	import jibenxinxi from './gerenziliaoChild/jibenxinxi.vue'
	import bingchengjilu from './gerenziliaoChild/bingchengjilu.vue'
	import checkrecord from './gerenziliaoChild/checkrecord.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		$api
	} from '@/ulm';
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const back1 = ref('')
	const userobj = ref({})
	const total = ref(0)
	const total1 = ref(0)
	const active = ref(0)
	const list = ref([])
	const list1 = ref([])
	const query = reactive({
		page: 1,
		list_rows: 10
	})
	onShow(() => {
		list.value = []
		list1.value = []
		query.page = 1
		init()
		initbc()
		init1()
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onReachBottom(() => {
		if (active.value == 1) {
			if (total.value > list.value.length) {
				query.page++
				initbc()
			}
		}
		if (active.value == 2) {
			if (total1.value > list1.value.length) {
				query.page++
				init1()
			}
		}
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})
	async function initbc() {
		const res1 = await $api.medicalRecord(query)
		if (res1.code == 1) {
			list.value.push(...res1.data.data)
			total.value = res1.data.total
		}
	}
	async function init() {
		const res = await $api.userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}
	async function init1() {
		const res = await $api.checkupRecord()
		if (res.code == 1) {
			list1.value.push(...res.data.data)
			total.value = res.data.total
		}
	}

	function qiehuan(num) {
		if (num == active.value) return
		active.value = num
		if (active.value == 1) {
			query.page = 1
			list.value = []
			initbc()
		} else if (active.value == 0) {

			init()
		} else if (active.value == 2) {
			query.page = 1
			list1.value = []
			init1()
		}

	}

	function initsc(num) {
		if (active.value == 1) {
			query.page = 1
			list.value = []
			initbc()
		} else if (active.value == 0) {

			init()
		} else if (active.value == 2) {
			query.page = 1
			list1.value = []
			init1()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.gerenziliao {
		width: 100%;
		overflow: hidden;
		position: relative;

		.gerenziliaoback {
			width: 100%;
			height: 450rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.bottomContent {
			width: 100%;
			overflow: hidden;
			margin-top: 28rpx;
		}

		.centerfenlei {
			width: 686rpx;
			margin: auto;
			margin-top: 16rpx;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cc {
				color: #2AB4F5 !important;
				font-weight: bold !important;
			}

			.itemfenlei {
				width: 128rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #1D2129;
				position: relative;
				height: 84rpx;
				line-height: 84rpx;

				.activebox {
					width: 48rpx;
					height: 4rpx;
					background: #2AB4F5;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					position: absolute;
					bottom: 0%;
				}
			}
		}
	}
</style>